<template>
  <a-layout>
    <a-layout-header class="header">
      <a-menu v-model="current" mode="horizontal">
        <a-menu-item v-for="menu in menus" :key="menu.path">
          <router-link :to="menu.path">{{ menu.mate.title }}</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content class="main">
      <router-view />
    </a-layout-content>
    <!-- <a-layout-footer></a-layout-footer> -->
  </a-layout>
</template>

<script>
import { routes } from '../router'
export default {
  data() {
    return {
      current: []
    }
  },
  methods: {
    onHistoryChange() {
      this.current = [this.$route.fullPath]
    }
  },
  mounted() {
    this.onHistoryChange()
  },
  watch: {
    '$route.fullPath': 'onHistoryChange'
  },
  computed: {
    menus() {
      return routes.find((item) => item.path === '/').children
    }
  }
}
</script>

<style scoped>
.header {
  height: auto;
  background: #ffffff;
}
.main {
  height: calc(100vh - 48px);
  overflow: auto;
}
</style>
